<head>
  <title>CertMaster</title>
</head>

<body>
  <div id="navbar_container"></div>
  <div class="container" id="container">
    <section id="splash"></section>
  </div>
  <div id="modal_container"></div>
</body>

<template name="Navbar">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">CertMaster</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li class="">
              <a href="#" class="certificates_link">Certificates</a>
            </li>
          </ul>
          <form class="navbar-search pull-right">
            <input type="text" class="searcher search-query span3" placeholder="Search">
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<template name="Certificates">
  <div class="page-header">
    <h1>Certificates <small>Listing current certificates.</small></h1>
  </div>
  <div class="row">
    <div class="span12">
      {{#if certificates}}
      <table class="table table-bordered tablesorter" id="certificates-table">
        <thead>
          <tr>
            <th>Company
              <i></i>
            </th>
            <th>Course Name
              <i></i>
            </th>
          </tr>
        </thead>
        <tbody>
          {{#each certificates}}
            {{> certificate_list_item_view}}
          {{/each}}
        </tbody>
      </table>
      {{/if}}
      <div class="form-actions">
        <a href="#" class="new btn btn-primary">
          <i class="icon-plus icon-white"></i>
          New Certificate
        </a>
      </div>
    </div>
  </div>
</template>

<template name="Splash">
  <div class="hero-unit">
    <h1>Certificate Maker</h1>
    <p>Get your certificates here!</p>
    <p>
      <a class="btn btn-primary btn-large go">
        Go
      </a>
    </p>
  </div>
</template>

<template name="certificate_list_item_view">
  <tr class="">
    <td class="">{{company_name}}</td>
    <td class="">
      {{course_name}}
      <span class="pull-right">
        <a href="#" class="preview btn btn-mini" title="Preview">
          <i class="icon-eye-open"></i>
        </a>
        <a href="#/certificate/{{_id}}" class="edit btn btn-mini" title="Edit">
          <i class="icon-pencil"></i>
        </a>
        <a href="#" class="remove btn btn-mini" title="Remove">
          <i class="icon-remove"></i>
        </a>
      </span>
    </td>
  </tr>
</template>

<template name="certificate_form_view">
  <form class="form-horizontal" id="certificate_form">
    <fieldset>
      <legend> <h3>Strings</h3><p>These are strings that are used in the templates below.</p></legend>
      <div class="control-group">
        <label for="logo_file" class="control-label">Logo File</label>
        <div class="controls">
          <input type="text" placeholder="Logo File" name="logo_file" value="{{logo_file}}" class="input-xlarge span10">
        </div>
      </div>
      <div class="control-group">
        <label for="company_name" class="control-label">Company Name</label>
        <div class="controls">
          <input type="text" placeholder="Company Name" name="company_name" value="{{company_name}}" class="input-xlarge span10">
        </div>
      </div>
      <div class="control-group">
        <label for="course_name" class="control-label">Course Name</label>
        <div class="controls">
          <input type="text" placeholder="CourseName" name="course_name" value="{{course_name}}" class="input-xlarge span10">
        </div>
      </div>
      <div class="control-group">
        <label for="student_name" class="control-label">Student Name</label>
        <div class="controls">
          <input type="text" class="input-xlarge span10" name="student_name" value="{{student_name}}">
        </div>
      </div>
      <div class="control-group">
        <label for="instructions" class="control-label">Instructions</label>
        <div class="controls">
          <input type="text" class="input-xlarge span10" name="instructions" value="{{instructions}}">
        </div>
      </div>
      <div class="control-group">
        <label for="sign" class="control-label">Sign</label>
        <div class="controls">
          <input type="text" class="input-xlarge span10" name="sign" value="{{sign}}">
        </div>
      </div>
      <div class="control-group">
        <label for="date_string" class="control-label">Date</label>
        <div class="controls">
          <input type="text" class="input-xlarge span10" name="date" value="{{date}}">
        </div>
      </div>
      <div class="control-group">
        <label for="print" class="control-label">Print</label>
        <div class="controls">
          <input type="text" class="input-xlarge span10" name="print" value="{{print}}">
        </div>
      </div>
      <div class="control-group">
        <label for="print_message" class="control-label">Print Message</label>
        <div class="controls">
          <input type="text" class="input-xlarge span10" name="print_message" value="{{print_message}}">
        </div>
      </div>
    </fieldset>
    <fieldset>
      <legend>
        <h3>Templates</h3>
        <p>These are the templates for language on the screen. Variables are enclosed in .</p>
      </legend>
      <div class="control-group">
        <label for="certificate_markup" class="control-label">Certificate Markup</label>
        <div class="controls">
          <p id="certificate_markup">{{certificate_markup}}</p>
        </div>
      </div>
      <div class="control-group">
        <label for="instructions_markup" class="control-label">Instructions Markup</label>
        <div class="controls">
          <p id="instructions_markup">{{instructions_markup}}</p>
        </div>
      </div>
      <!-- <div class="control-group">
        <label for="certificate_certification" class="control-label">Certificate Certification</label>
        <div class="controls">
          <textarea rows="3" class="input-xlarge span10" name="certificate_certification">{{certificate_certification}}</textarea>
        </div>
      </div>
      <div class="control-group">
        <label for="certificate_instructions" class="control-label">Certificate Instructions</label>
        <div class="controls">
          <textarea rows="3" class="input-xlarge span10" name="certificate_instructions">{{certificate_instructions}}</textarea>
        </div>
      </div>
      <div class="control-group">
        <label for="certificate_signature_prompt" class="control-label">Certificate Signature Prompt</label>
        <div class="controls">
          <textarea rows="3" class="input-xlarge span10" name="certificate_signature_prompt">{{certificate_signature_prompt}}</textarea>
        </div>
      </div>
      <div class="control-group">
        <label for="certificate_date_prompt" class="control-label">Certificate Date Prompt</label>
        <div class="controls">
          <textarea rows="3" class="input-xlarge span10" name="certificate_date_prompt">{{certificate_date_prompt}}</textarea>
        </div>
      </div>
      <div class="control-group">
        <label for="certificate_date" class="control-label">Certificate Date</label>
        <div class="controls">
          <textarea rows="3" class="input-xlarge span10" name="certificate_date">{{certificate_date}}</textarea>
        </div>
      </div>
      <div class="control-group">
        <label for="print_button" class="control-label">Print Button</label>
        <div class="controls">
          <textarea rows="3" class="input-xlarge span10" name="print_button">{{print_button}}</textarea>
        </div>
      </div>
      <div class="control-group">
        <label for="print_description" class="control-label">Print Description</label>
        <div class="controls">
          <textarea rows="3" class="input-xlarge span10" name="print_description">{{print_description}}</textarea>
        </div>
      </div> -->
      <div class="form-actions">
        <a class="save btn btn-primary">Save</a>
        <a class="cancel btn">Cancel</a>
      </div>
    </fieldset>
  </form>
  <script src="/ace/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    console.log(ace);
  </script>
</template>

<template name="modal_view">
  <div class="modal" id="modal_view">
    <div class="modal-header">
      <button class="close" data-dismiss="modal">×</button>
      <h3>Removing {{title}}</h3>
    </div>
    <div class="modal-body">
      <p>{{body}}</p>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn" data-dismiss="modal">Cancel</a>
      <a href="#" class="remove btn btn-primary" data-dismiss="modal">Remove</a>
    </div>
  </div>
</template>
